<!-- templates/dashboard.html 前端页面 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分析系统</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="/static/layui/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <!-- 情感分布 -->
    <div class="layui-row">
        <div class="layui-col-md6">
            <div id="sentimentChart" style="height:400px"></div>
        </div>
        <div class="layui-col-md6">
            <div id="scoreChart" style="height:400px"></div>
        </div>
    </div>

    <!-- 分类统计 -->
    <div class="layui-row">
        <div id="categoryChart" style="height:400px"></div>
    </div>

    <!-- 关键词云 -->
    <div class="layui-row">
        <div class="layui-col-md6">
            <div id="serviceWordcloud" style="height:300px"></div>
        </div>
        <div class="layui-col-md6">
            <div id="tasteWordcloud" style="height:300px"></div>
        </div>
    </div>
</div>

<script>
    layui.use(function(){
        const $ = layui.$;

        // 情感分布饼图
        const sentimentChart = echarts.init(document.getElementById('sentimentChart'));
        $.get('/api/sentiment', function(data){
            sentimentChart.setOption({
                title: { text: '评论情感分布' },
                series: [{
                    type: 'pie',
                    data: Object.entries(data).map(([name, value]) => ({name, value}))
                }]
            });
        });

        // 评分分布直方图
        const scoreChart = echarts.init(document.getElementById('scoreChart'));
        $.get('/api/score_dist', function(data){
            scoreChart.setOption({
                title: { text: '评分分布' },
                xAxis: { data: data.map(d => d.score) },
                yAxis: { type: 'value' },
                series: [{
                    type: 'bar',
                    data: data.map(d => d.count)
                }]
            });
        });

        // 分类统计柱状图
        const categoryChart = echarts.init(document.getElementById('categoryChart'));
        $.get('/api/category_stats', function(data){
            categoryChart.setOption({
                title: { text: '店铺分类统计' },
                tooltip: { trigger: 'axis' },
                xAxis: { data: data.map(d => d.category) },
                yAxis: [{ type: 'value', name: '评论量' }],
                series: [{
                    name: '评论量',
                    type: 'bar',
                    data: data.map(d => d.count)
                }]
            });
        });

        // 服务态度词云
        const serviceWC = echarts.init(document.getElementById('serviceWordcloud'));
        $.get('/api/keywords/service', function(data){
            serviceWC.setOption({
                title: { text: '服务态度关键词' },
                series: [{
                    type: 'wordCloud',
                    data: data
                }]
            });
        });

        // 菜品口味词云
        const tasteWC = echarts.init(document.getElementById('tasteWordcloud'));
        $.get('/api/keywords/taste', function(data){
            tasteWC.setOption({
                title: { text: '菜品口味关键词' },
                series: [{
                    type: 'wordCloud',
                    data: data
                }]
            });
        });
    });
</script>
</body>
</html>